<template>
 <div class="BtnInput">
    <div :class="[color == 'yellow' ? 'yellow' : color == 'red' ? 'red' : color == 'green' ? 'green' : color == 'blue' ? 'blue' :'',
        shape == 'round' ? 'round' : shape == 'square' ? 'square' : shape == 'rectangle' ? 'rectangle' : shape == 'round-rect' ? 'round-rect' : '',
        size == 'big' ? 'big' : size == 'middle' ? 'middle' : size == 'small' ? 'small' : '' ]"> 
        <slot></slot>
    </div>
 </div>
</template>

<script>
 export default {
   name:'BtnInput',
   props:{
       color:{
           type:String,
           default:'red'
       },
       shape:{
           type:String,
           default:'rectangle'
       },
       size:{
           type:String,
           default:'middle'
       }
   }
 }
</script>

 
<style lang="stylus" scoped>
.BtnInput
    margin-left:25px
    width: 80px
    height: 80px
    line-height: 80px
    text-align: center
    color: #fff
.yellow
    background: yellow
.red
    background: red
.green
    background: green
.blue
    background:blue
.round //圆形
    border-radius: 75%
.square //方形
    border-radius: 0%
.rectangle //矩形
  width: 100px
  height: 65px
  line-height: 65px
.round-rect //圆角矩形
  width: 100px
  height: 65px
  line-height: 65px
  border-radius: 15px
.big
    width 130px
    height 85px
    line-height 85px
.small
    width 70px
    height 45px
    line-height 45px
.middle
    width 100px
    height 65px
</style>
